import React, { Component } from 'react';
import store from './store'
import { changeInputAction, addItemAction, 
  deleteItemAction,
  getMyListAction, 
  getTodoList
} from './store/actionCreators'
import TodoListUI from './TodoListUI'
//关键代码------------end

// const data = [
//   '早8点开晨会，分配今天的开发工作',
//   '早9点和项目经理作开发需求讨论会',
//   '晚5:30对今日代码进行review'
// ]

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = store.getState();
    this.changeInputValue = this.changeInputValue.bind(this)
    //----------关键代码-----------start
    this.storeChange = this.storeChange.bind(this)  //转变this指向
    this.clickBtn = this.clickBtn.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
    store.subscribe(this.storeChange) //订阅Redux的状态
    //----------关键代码-----------end
  }
  render() {
    return (
      <TodoListUI 
        inputValue={this.state.inputValue}
        list={this.state.list}
        changeInputValue={this.changeInputValue}
        clickBtn={this.clickBtn}
        deleteItem={this.deleteItem}
      />
    );
  }
  componentDidMount() {
    // redux - thunk 01
    // const action = getTodoList()
    // store.dispatch(action)
    
    //mySagas 02
    const action = getMyListAction()
    store.dispatch(action)
    console.log(action)


  }

  changeInputValue(e){
    const action = changeInputAction(e.target.value)
    store.dispatch(action)
  }
  clickBtn() {
    const action = addItemAction()
    store.dispatch(action)
  }
  storeChange() {//订阅Redux的状态
    this.setState(store.getState())
  } 
  deleteItem(index) {
    const action = deleteItemAction(index)
    store.dispatch(action)
  }
}

export default TodoList;